<template>
  <div style>
    <header 
      class="mint-header" 
      style="font-size: 18px;">
      <div class="mint-header-button is-left">
        <button 
          class="mint-button mint-button--default mint-button--normal" 
          style="font-size: 15px;" 
          @click="option">
          <span class="mint-button-icon">
            <i class="mintui mintui-back"/>
          </span>
          <label class="mint-button-text">返回</label>
        </button>
      </div>
      <h1 class="mint-header-title">申请</h1>
      <div class="mint-header-button is-right"/>
    </header>
    <!-- <div style="height:40px" /> -->
    <!-- <div>{{equilist.length}}</div> -->
    <div style="padding:20px 10px;background:#fff">
      <div class="sp_l">
        <div 
          v-for="(item, index) in spval" 
          :key="index" 
          @click="goform(item.num,item.name)">
          <img 
            :src="item.image" 
            class="img" 
            alt 
            style="width:100%;height:100%" >
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  components: {},
  layout: 'default2',
  data() {
    return {
      equilist: [],
      ts: this.newStore(),
      spval: [
        { name: '报销审批', image: 'biaoxiao.png', num: 'formvalreim' },

        { name: '资金审批', image: 'zijin.png', num: 'formvalmoney' },
        { name: '请假审批', image: 'qingjia.png', num: 'formvalleave' },
        {
          name: '外出、培训、学习审批',
          image: 'waichu.png',
          num: 'formvalgoout'
        },

        { name: '车辆维修审批', image: 'cheliang.png', num: 'formvalcar' },
        { name: '设备维修审批', image: 'shebei1.png', num: 'formvalrepair' },
        { name: '合同审批', image: 'hetong.png', num: 'contract_approval' }
      ],
      htitle: '申请'
    }
  },
  created() {
    this.getapprovallist()
  },
  methods: {
    goequiinfo() {
      this.$router.push('/trainplaninfo')
    },
    //进入表单
    goform(num, name) {
      this.$router.push({
        name: num,
        query: { name: name }
      })
    },
    checkinfo(item) {
      this.$router.push({
        name: 'approvalinfo',
        query: {
          name: item.hash.atypename,
          id: item.hash.id,
          atype: item.hash.atype
        }
      })
    },
    option() {
      this.$router.push({
        name: 'jbrhome',
        query: {
          name: ''
        }
      })
    },
    getapprovallist() {
      const req = {
        handle:
          '9000B8B8D347526960C5BAB1FB6894EFDAA9E0F0A8692CC8EEBAA5844184BC51804F94D95BA43906',
        limit: 20
      }
      this.spost(this.ts, '/mainservlet', req).then(ts => {
        if (ts.d.sflag == 'success') {
          this.equilist = ts.d.data.operation1
          console.log(ts.d.data, '2')
        }
      })
    }
  }
}
</script>
<style scoped>
.sp_l {
  display: flex;
  display: -webkit-flex;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  margin: auto;
}
.sp_l div {
  width: calc(100% / 2.3);
  margin: 10px;
  box-sizing: border-box;
  text-align: center;
  height: auto;
  border-radius: 8px;
  color: #fff;
  box-shadow: 1px 2px 3px 3px #f3f3f3;
}
html {
  background: #f3f3f3;
}
.equi-div {
  font-size: 12px;
  line-height: 20px;
  color: #969191;
}
.equi-shebei {
  display: inline-block;
  padding: 1px 10px;
  color: #fff !important;
  background: rgb(51, 51, 51);
}
.h3_equi {
  font-size: 16px;
  font-weight: 400;
  line-height: 40px;
}
.equi-div1 {
  font-size: 16px;
  line-height: 25px;
  width: 100%;
  background: #fff;
  /* margin: 0 10px; */
  /* border-bottom: 1px solid #ddd; */
  margin-bottom: 10px;
}
.equi-span {
  color: #35495e;
}
.equi-xq {
  line-height: 90px;
  /* padding-left: 20px; */
  color: #26a2ff;
  float: right;
  /* background: #ddd; */
  margin-top: 5px;
  width: 20%;
  text-align: center;
  border-left: 1px solid #ddd;
}
.equi-left {
  /* width: 100%; */
  display: inline-block;
  /* float: left; */
  padding-right: 0px;
  /* margin: 0 auto; */
  padding: 10px;
  background: #fff;
}
.mint-search {
  height: 7vh;
}
.mint-searchbar {
  background: #f3f3f3 !important;
}
</style>
